<template>
  <div class="warehouse-container">
    <!-- 查询条件卡片（移到顶部） -->
    <el-card class="search-card" shadow="hover">
      <template #header>
        <div class="card-header">
          <el-icon><Search /></el-icon>
          <span>查询条件</span>
        </div>
      </template>

      <!-- 时间查询按钮组 -->
      <div class="time-filter-section">
        <div class="time-filter-buttons">
          <el-button
            v-for="(item, index) in timeFilterOptions"
            :key="index"
            :type="selectedTimeFilter === item.value ? 'primary' : 'default'"
            :class="[
              'time-filter-btn',
              { active: selectedTimeFilter === item.value },
            ]"
            @click="handleTimeFilterChange(item.value)"
            size="small"
          >
            {{ item.label }}
          </el-button>
        </div>
      </div>

      <el-form :inline="true" :model="formInline" class="search-form">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="出库单号">
              <el-input
                v-model="formInline.Warehouse_Code"
                placeholder="请输入编号"
                clearable
                class="custom-input"
              >
                <template #prefix>
                  <el-icon><Document /></el-icon>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="货品">
              <el-input
                v-model="formInline.Product_Name"
                placeholder="请输入货品名称"
                clearable
                class="custom-input"
              >
                <template #prefix>
                  <el-icon><Goods /></el-icon>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="单位">
              <el-select
                v-model="formInline.Unit_ID"
                placeholder="请选择"
                clearable
                class="custom-select"
              >
                <el-option
                  v-for="item in unit"
                  :label="item.unit_Name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" style="margin-top: 8px">
          <el-col :span="8">
            <el-form-item label="货品类别">
              <el-tree-select
                v-model="formInline.Category_ID"
                :data="categoryTreeList"
                placeholder="请选择"
                clearable
                check-strictly
                :props="{
                  children: 'children',
                  label: 'category_Name',
                  value: 'id',
                }"
                style="width: 200px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="仓库名称">
              <el-select
                v-model="formInline.Warehouse_ID"
                placeholder="请选择"
                clearable
                class="custom-select"
              >
                <el-option
                  v-for="item in warehouselist"
                  :label="item.warehouse_Name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="出库类型">
              <el-select
                v-model="formInline.Warehousing_Type"
                placeholder="请选择"
                clearable
                class="custom-select"
              >
                <el-option label="销售出库" value="销售出库" />
                <el-option label="生产领用出库" value="生产领用出库" />
                <el-option label="领用退还出库" value="领用退还出库" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" style="margin-top: 8px">
          <el-col :span="8">
            <el-form-item label="制单日期">
              <el-date-picker
                v-model="formInline.CreateTime"
                type="date"
                placeholder="请选择制单日期"
                style="width: 100%"
                class="custom-date-picker"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              :label="
                selectedTimeFilter === 'custom' ? '出库日期范围 *' : '出库日期'
              "
              :class="{ 'custom-date-active': selectedTimeFilter === 'custom' }"
            >
              <el-date-picker
                v-model="formInline.dateRange"
                type="daterange"
                range-separator="至"
                :start-placeholder="
                  selectedTimeFilter === 'custom'
                    ? '请选择开始日期'
                    : '开始日期'
                "
                :end-placeholder="
                  selectedTimeFilter === 'custom'
                    ? '请选择结束日期'
                    : '结束日期'
                "
                style="width: 100%"
                class="custom-date-picker"
                @change="handleDateRangeChange"
                value-format="YYYY-MM-DD"
                :disabled="
                  selectedTimeFilter !== 'custom' &&
                  selectedTimeFilter !== 'today'
                "
              />
              <div
                v-if="selectedTimeFilter === 'custom'"
                class="custom-time-hint"
              >
                请选择具体的开始和结束日期
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="8" style="text-align: right; white-space: nowrap">
            <el-form-item>
              <el-button type="primary" @click="getdata()" class="search-btn">
                <el-icon><Search /></el-icon>
                查询
              </el-button>
              <el-button @click="resetForm" class="reset-btn">
                <el-icon><Refresh /></el-icon>
                重置
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <div class="main-content" style="margin-top: 0">
      <!-- 统计卡片 -->
      <div class="stats-section">
        <el-card class="stats-card outbound-card" shadow="hover">
          <div class="stats-content">
            <div class="stats-number">{{ totalOutboundCount }}</div>
            <div class="stats-label">出库数量</div>
          </div>
          <div class="stats-icon">
            <el-icon><ArrowUp /></el-icon>
          </div>
        </el-card>
        <el-card class="stats-card outbound-amount-card" shadow="hover">
          <div class="stats-content">
            <div class="stats-number">¥{{ totalOutboundAmount }}</div>
            <div class="stats-label">出库金额</div>
          </div>
          <div class="stats-icon">
            <el-icon><Money /></el-icon>
          </div>
        </el-card>
      </div>
      <!-- 数据表格卡片 -->
      <el-card class="table-card" shadow="hover">
        <template #header>
          <div class="card-header">
            <el-icon><List /></el-icon>
            <span>出库流水</span>
            <div class="header-actions">
              <el-button
                type="success"
                @click="handleExport()"
                class="export-btn"
              >
                <el-icon><Download /></el-icon>
                导出
              </el-button>
              <el-button type="primary" @click="getdata()" class="refresh-btn">
                <el-icon><Refresh /></el-icon>
                刷新
              </el-button>
            </div>
          </div>
        </template>
        <el-table
          :data="tableData"
          style="width: 100%"
          class="custom-table"
          :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column prop="warehouse_Code" label="序号" width="80">
            <template #default="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column prop="warehouse_Code" label="出库单号" width="150" />
          <el-table-column prop="reviewTime" label="出库日期" width="120">
            <template #default="scope">
              {{ formatDate(scope.row.reviewTime) }}
            </template>
          </el-table-column>
          <el-table-column prop="warehouseType" label="业务类型" width="100">
            <template #default="scope">
              <el-tag
                :type="scope.row.warehouseType == 2 ? 'danger' : 'info'"
                size="small"
              >
                {{ scope.row.warehouseType == 2 ? "出库" : "入库" }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="warehousing_Type"
            label="出库类型"
            width="120"
          />
          <el-table-column prop="warehouse_Name" label="仓库名称" width="100" />
          <el-table-column
            prop="warehouse_InOrOutCount"
            label="出库数量"
            width="100"
          >
            <template #default="scope">
              <span v-if="scope.row.warehouseType == 2" class="outbound-count">
                {{ scope.row.warehouse_InOrOutCount }}
              </span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column prop="total_Price" label="出库金额" width="120">
            <template #default="scope">
              <span v-if="scope.row.warehouseType == 2" class="outbound-amount">
                ¥{{ scope.row.total_Price }}
              </span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column prop="reviewer" label="经办人" width="100" />
          <el-table-column prop="createUse" label="制单人" width="100">
            <template #default="scope">
              <span v-if="scope.row.createUse == '10032'">吴维昊</span>
              <span v-if="scope.row.createUse == '10036'">王雨龙</span>
              <span v-if="scope.row.createUse == '10037'">张可欣</span>
              <span v-if="scope.row.createUse == '10038'">赵姝雅</span>
              <span v-if="scope.row.createUse == '10039'">段栋兴</span>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="pagination-wrapper">
          <el-pagination
            v-model:current-page="page.PageIndex"
            v-model:page-size="page.PageSize"
            :page-sizes="[15, 20, 25, 30]"
            layout="total, sizes, prev, pager, next, jumper"
            prev-text="上一页"
            next-text="下一页"
            :total="page.totalCount"
            class="custom-pagination"
          />
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import axios from "axios";
import { reactive, onMounted, ref, watch, computed } from "vue";
import { BasicsRed } from "@/http/axiosHelper";
import { ElMessage, ElMessageBox } from "element-plus";
import { BasicsWrite } from "@/http/axiosHelper";
import { useRouter } from "vue-router";
import { StorageRed } from "@/http/axiosHelper";
// import { StorageRed } from "@/http/axiosHelper";
import {
  Box,
  Search,
  Document,
  Refresh,
  ArrowDown,
  ArrowUp,
  Money,
  List,
  Download,
  Goods,
} from "@element-plus/icons-vue";

const router = useRouter();
const dialogVisible = ref(false);

// 时间筛选选项
const timeFilterOptions = ref([
  { label: "今日", value: "today" },
  { label: "昨日", value: "yesterday" },
  { label: "本周", value: "thisWeek" },
  { label: "上周", value: "lastWeek" },
  { label: "本月", value: "thisMonth" },
  { label: "上月", value: "lastMonth" },
  { label: "自定义时间", value: "custom" },
]);

const selectedTimeFilter = ref("today");

// 处理时间筛选变化
const handleTimeFilterChange = (value: string) => {
  console.log("时间筛选变化:", value);
  selectedTimeFilter.value = value;
  if (value !== "custom") {
    updateDateRange(value);
    console.log("更新日期范围:", formInline.startTime, formInline.endTime);
    getdata();
  } else {
    // 自定义时间模式，清空日期范围，等待用户手动选择
    formInline.startTime = null;
    formInline.endTime = null;
    formInline.dateRange = null;
    console.log("切换到自定义时间模式");
  }
};

// 根据选择的时间筛选更新日期范围
const updateDateRange = (filterType: string) => {
  const now = new Date();
  const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());

  const formatDateToString = (date: Date) => {
    const y = date.getFullYear();
    const m = String(date.getMonth() + 1).padStart(2, "0");
    const d = String(date.getDate()).padStart(2, "0");
    return `${y}-${m}-${d}`;
  };

  switch (filterType) {
    case "today":
      formInline.dateRange = [
        formatDateToString(today),
        formatDateToString(today),
      ];
      formInline.startTime = today;
      formInline.endTime = today;
      break;
    case "yesterday":
      const yesterday = new Date(today);
      yesterday.setDate(yesterday.getDate() - 1);
      formInline.dateRange = [
        formatDateToString(yesterday),
        formatDateToString(yesterday),
      ];
      formInline.startTime = yesterday;
      formInline.endTime = yesterday;
      break;
    case "thisWeek":
      const weekStart = new Date(today);
      weekStart.setDate(today.getDate() - today.getDay());
      formInline.dateRange = [
        formatDateToString(weekStart),
        formatDateToString(today),
      ];
      formInline.startTime = weekStart;
      formInline.endTime = today;
      break;
    case "lastWeek":
      const lastWeekStart = new Date(today);
      lastWeekStart.setDate(today.getDate() - today.getDay() - 7);
      const lastWeekEnd = new Date(lastWeekStart);
      lastWeekEnd.setDate(lastWeekStart.getDate() + 6);
      formInline.dateRange = [
        formatDateToString(lastWeekStart),
        formatDateToString(lastWeekEnd),
      ];
      formInline.startTime = lastWeekStart;
      formInline.endTime = lastWeekEnd;
      break;
    case "thisMonth":
      const monthStart = new Date(now.getFullYear(), now.getMonth(), 1);
      formInline.dateRange = [
        formatDateToString(monthStart),
        formatDateToString(today),
      ];
      formInline.startTime = monthStart;
      formInline.endTime = today;
      break;
    case "lastMonth":
      const lastMonthStart = new Date(now.getFullYear(), now.getMonth() - 1, 1);
      const lastMonthEnd = new Date(now.getFullYear(), now.getMonth(), 0);
      formInline.dateRange = [
        formatDateToString(lastMonthStart),
        formatDateToString(lastMonthEnd),
      ];
      formInline.startTime = lastMonthStart;
      formInline.endTime = lastMonthEnd;
      break;
    case "custom":
      // 自定义时间不自动设置，用户手动选择
      formInline.dateRange = null;
      formInline.startTime = null;
      formInline.endTime = null;
      break;
  }
};

// 处理日期范围变化
const handleDateRangeChange = (value: [string, string] | null) => {
  if (value && value.length === 2) {
    formInline.startTime = new Date(value[0]);
    formInline.endTime = new Date(value[1]);
    console.log("日期范围变化:", value);

    // 在自定义时间模式下，选择完日期后自动查询
    if (selectedTimeFilter.value === "custom") {
      getdata();
    }
  } else {
    formInline.startTime = null;
    formInline.endTime = null;
  }
};

// 定义数据类型接口
interface WarehouseItem {
  warehouseType: number;
  warehouse_InOrOutCount: number;
  total_Price: number;
  warehouse_Code: string;
  reviewTime: string;
  warehousing_Type: string;
  warehouse_Name: string;
  reviewer: string;
  createUse: string;
  [key: string]: any; // 允许其他属性
}

function formatDate(dateStr: string) {
  if (!dateStr) return "";
  const date = new Date(dateStr);
  if (isNaN(date.getTime())) return dateStr;
  const y = date.getFullYear();
  const m = String(date.getMonth() + 1).padStart(2, "0");
  const d = String(date.getDate()).padStart(2, "0");
  return `${y}-${m}-${d}`;
}

// 计算出库数量和出库金额总和
const totalOutboundCount = computed(() => {
  return (tableData.value as WarehouseItem[])
    .filter((item) => item.warehouseType == 2) // 只统计出库数据
    .reduce((sum, item) => sum + (item.warehouse_InOrOutCount || 0), 0);
});

const totalOutboundAmount = computed(() => {
  return (tableData.value as WarehouseItem[])
    .filter((item) => item.warehouseType == 2) // 只统计出库数据
    .reduce((sum, item) => sum + (item.total_Price || 0), 0)
    .toFixed(2);
});

// 重置表单
const resetForm = () => {
  Object.assign(formInline, {
    Warehouse_Code: "",
    Warehousing_Type: "",
    Warehouse_ID: null,
    Reviewer: "",
    Product_Name: "",
    Category_ID: null,
    Unit_ID: null,
    CreateTime: null,
    CreateUse: null,
    startTime: null,
    endTime: null,
    dateRange: null,
  });
  
  getdata();
  ElMessage.success("查询条件已重置");
};

//产品单位下拉框
const unit = ref();
const unitdata = () => {
  StorageRed.get("/api/WorkOrder/GetUnitDropdown").then((res: any) => {
    unit.value = res.data.data;
  });
};
// 产品类型树形列表
const categoryTreeList: any = ref([]);
// 获取产品类型树形结构
const getCategoryTreeList = () => {
  StorageRed({
    url: "/api/WorkOrder/GetProductCategoryTree",
    method: "get",
  }).then((res) => {
    categoryTreeList.value = res.data.data;
  });
};

const formInline = reactive({
  Warehouse_Code: "",
  Warehousing_Type: "",
  Warehouse_ID: null,
  Reviewer: "",
  Product_Name: "",
  Category_ID: null,
  Unit_ID: null,
  CreateTime: null as Date | null,
  CreateUse: null,
  startTime: null as Date | null,
  endTime: null as Date | null,
  dateRange: null as [string, string] | null,
});

const page = reactive({
  PageIndex: 1,
  PageSize: 15,
  totalCount: 0,
});

// 导出函数（假设已配置 Axios 拦截器自动添加 Token）
async function handleExport() {
  try {
    // 格式化日期参数
    const formatDateForAPI = (date: Date | null) => {
      if (!date) return null;
      const y = date.getFullYear();
      const m = String(date.getMonth() + 1).padStart(2, "0");
      const d = String(date.getDate()).padStart(2, "0");
      return `${y}-${m}-${d}`;
    };

    // 1. 调用后端导出接口（GET 请求，参数通过 params 传递）
    const response = await StorageRed({
      url: "/api/WorkOrder/StorageGetWarehouse_OutExport", // 后端接口地址
      method: "GET",
      params: {
        PageIndex: page.PageIndex,
        PageSize: page.PageSize,
        Category_ID: formInline.Category_ID,
        CreateTime: formatDateForAPI(formInline.CreateTime),
        CreateUse: formInline.CreateUse,
        Product_Name: formInline.Product_Name,
        startTime: formatDateForAPI(formInline.startTime),
        endTime: formatDateForAPI(formInline.endTime),
        Reviewer: formInline.Reviewer,
        Unit_ID: formInline.Unit_ID,
        Warehouse_Code: formInline.Warehouse_Code,
        Warehouse_ID: formInline.Warehouse_ID,
        Warehousing_Type: formInline.Warehousing_Type,
      }, // 对应后端 [FromQuery] 的 command 参数
      responseType: "blob", // 关键：指定响应类型为二进制流（Excel 文件）
    });

    // 2. 从响应头获取文件名（后端通过 File 方法设置的 fileName）
    const fileName = getFileNameFromHeaders(response.headers);

    // 3. 生成下载链接并触发下载
    const blob = new Blob([response.data], {
      type:
        response.headers["content-type"] ||
        "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
    });
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = fileName; // 文件名从响应头获取或自定义
    document.body.appendChild(a);
    a.click();

    // 4. 清理资源
    window.URL.revokeObjectURL(url);
    document.body.removeChild(a);

    ElMessage.success("导出成功");
  } catch (error: any) {
    // 处理错误（如后端返回 401/400 等）
    console.error("导出失败：", error.response?.data || error.message);
    ElMessage.error("导出失败，请检查参数或重新登录");
  }
}

// 辅助函数：从响应头提取文件名（后端通过 File 方法设置）
function getFileNameFromHeaders(headers: any) {
  const contentDisposition =
    headers["content-disposition"] || headers["Content-Disposition"];
  if (!contentDisposition) return "出库流水.xlsx"; // 默认文件名

  // 解码文件名（处理中文编码问题）
  const match = contentDisposition.match(/filename\*?=([^;]+)/);
  if (match) {
    return decodeURIComponent(match[1].replace(/["']/g, ""));
  }
  return "出库流水.xlsx";
}

watch(page, () => {
  getdata();
});

onMounted(() => {
  getdata();
  warehouselistdata();
  unitdata();
  getCategoryTreeList();
});

const warehouselist = ref();
//仓库下拉框
const warehouselistdata = () => {
  StorageRed.get("/api/Warehouse_InOrOut/GetWarehouseModel").then(
    (res: any) => {
      warehouselist.value = res.data.data;
    }
  );
};

const tableData = ref([]);

const getdata = () => {
  // 格式化日期参数
  const formatDateForAPI = (date: Date | null) => {
    if (!date) return null;
    const y = date.getFullYear();
    const m = String(date.getMonth() + 1).padStart(2, "0");
    const d = String(date.getDate()).padStart(2, "0");
    return `${y}-${m}-${d}`;
  };

  const params = {
    PageIndex: page.PageIndex,
    PageSize: page.PageSize,
    Category_ID: formInline.Category_ID,
    CreateTime: formatDateForAPI(formInline.CreateTime),
    CreateUse: formInline.CreateUse,
    Product_Name: formInline.Product_Name,
    startTime: formatDateForAPI(formInline.startTime),
    endTime: formatDateForAPI(formInline.endTime),
    Reviewer: formInline.Reviewer,
    Unit_ID: formInline.Unit_ID,
    Warehouse_Code: formInline.Warehouse_Code,
    Warehouse_ID: formInline.Warehouse_ID,
    Warehousing_Type: formInline.Warehousing_Type,
  };

  console.log("查询参数:", params);

  StorageRed.get("/api/WorkOrder/GetWarehouse_OutFlowingWater", {
    params: params,
  }).then((res) => {
    tableData.value = res.data.data;
    page.totalCount = res.data.totalCount;
  });
};
</script>

<style scoped>
.warehouse-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 20px;
}

/* 查询卡片间距优化 */
.search-card {
  margin-bottom: 24px;
}

/* 时间筛选按钮组 */
.time-filter-section {
  margin-bottom: 20px;
  padding: 16px 0;
  border-bottom: 1px solid #f0f0f0;
}

.time-filter-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.time-filter-btn {
  border-radius: 6px;
  font-size: 14px;
  padding: 8px 16px;
  border: 1px solid #dcdfe6;
  background: #fff;
  color: #606266;
  transition: all 0.3s;
}

.time-filter-btn:hover {
  border-color: #409eff;
  color: #409eff;
}

.time-filter-btn.active {
  background: #409eff;
  border-color: #409eff;
  color: #fff;
}

.time-filter-btn.active:hover {
  background: #337ecc;
  border-color: #337ecc;
}

.main-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 0;
}

/* 卡片统一样式 */
.search-card,
.stats-card,
.table-card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border: none;
  margin-bottom: 20px;
}

/* 统计卡片 */
.stats-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 24px;
  margin-top: 12px;
}
.stats-card {
  min-width: 280px;
  min-height: 140px;
  background: white;
  border-left: 4px solid #ff6b6b;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 0;
}
.stats-number {
  color: #ff6b6b;
  font-size: 32px;
  font-weight: 700;
}
.stats-label {
  color: #666;
  font-size: 14px;
  font-weight: 500;
}

/* 表单控件 */
.custom-input,
.custom-select,
.custom-date-picker {
  border-radius: 8px;
  width: 200px;
}
.search-btn,
.reset-btn,
.export-btn,
.refresh-btn {
  border-radius: 8px;
  padding: 8px 16px;
  font-weight: 500;
  margin-right: 8px;
}
.search-btn,
.refresh-btn {
  background: linear-gradient(135deg, #ff6b6b 0%, #ff9f43 100%);
  border: none;
  color: #fff;
}
.search-btn:hover,
.refresh-btn:hover {
  background: linear-gradient(135deg, #ff9f43 0%, #ff6b6b 100%);
}
.reset-btn {
  background: #f8f9fa;
  border: 2px solid #dee2e6;
  color: #6c757d;
}
.reset-btn:hover {
  background: #e9ecef;
  border-color: #adb5bd;
}

/* 表格样式 */
.table-card .el-table th {
  background-color: #f8f9fa;
  color: #333;
  font-weight: 600;
}
.table-card .el-table {
  border-radius: 8px;
  overflow: hidden;
}

/* 分页样式 */
.pagination-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  padding: 20px 0;
}
.custom-pagination {
  background: rgba(255, 255, 255, 0.8);
  border-radius: 8px;
  padding: 8px 16px;
}

/* 自定义时间模式下的日期选择器样式 */
.custom-date-active .el-form-item__label {
  color: #409eff;
  font-weight: 600;
}

.custom-date-active .el-input__wrapper {
  border-color: #409eff;
  box-shadow: 0 0 0 1px #409eff;
}

.custom-time-hint {
  font-size: 12px;
  color: #909399;
  margin-top: 4px;
  line-height: 1.2;
}

/* 禁用状态下的日期选择器样式 */
.custom-date-picker.is-disabled .el-input__wrapper {
  background-color: #f5f7fa;
  border-color: #e4e7ed;
  color: #c0c4cc;
}

/* 响应式 */
@media (max-width: 1200px) {
  .warehouse-container {
    padding: 16px;
  }
  .stats-section {
    flex-direction: column;
    align-items: center;
  }
}
@media (max-width: 768px) {
  .main-content {
    gap: 16px;
  }
  .stats-section {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
  .header-actions {
    flex-direction: column;
    gap: 8px;
  }
  .export-btn,
  .refresh-btn {
    width: 100%;
  }
}
</style>
